<template>
  <div>
    <el-table
      :data="tableData"
      height="400"
      border
      stripe
    >
      <el-table-column
        label="#"
        type="index"
        width="66"
      />
      <el-table-column
        prop="order_number"
        label="订单编号"
      />
      <el-table-column
        prop="order_price"
        label="订单价格"
      />
      <el-table-column
        prop="order_pay"
        label="是否付款"
      >
        <template slot-scope="scope">
          <el-tag
            effect="dark"
            :type="scope.row.order_pay === '1' ? '' : 'danger'"
            disable-transitions
          >{{ scope.row.order_pay=== "1"? '已支付':'未支付' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="is_send"
        label="是否发货"
      />
      <el-table-column
        prop="update_time"
        label="下单时间"
      />
      <el-table-column
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            width="60"
            trigger="hover"
            content="修改订单地址"
          >
            <el-button
              slot="reference"
              type="primary"
              round
              size="mini"
              icon="el-icon-edit"
              @click="ModifyOrderAddress(scope.row)"
            />
          </el-popover>
          <el-popover
            placement="top-start"
            width="150"
            trigger="hover"
            content="查看物流信息"
          >
            <el-button
              slot="reference"
              class="lr"
              type="success"
              round
              size="mini"
              icon="el-icon-location-information"
              @click="LogisticsInformation(scope.row)"
            />
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <order-popup v-if="dialogVisible" :dialog-visible.sync="dialogVisible" :info-id="infoId" @delId="infoId=0" />
  </div>
</template>

<script>
import orderPopup from '@/components/order-popup'
export default {
  components: {
    orderPopup
  },
  props: {
    // 存表单数据
    tableData: {
      type: Array,
      required: true
    },
    // 页面条数
    formOrder: {
      type: Object,
      required: true
    },
    // 总条数
    total: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // 表单弹出
      dialogVisible: false,
      // 订单编号
      infoId: 0
    }
  },

  created() {
  },

  methods: {
    // 修改订单地址
    ModifyOrderAddress(row) {
      console.log(row)
      this.dialogVisible = true
    },
    // 查看物流信息
    LogisticsInformation(row) {
      this.dialogVisible = true
      console.log(row.order_id)
      this.infoId = row.order_id
    }
  }
}
</script>

<style scoped lang='scss'>
.lr {
  margin-left: 10px;
}
</style>
